<template>
  <div class="container">
    <van-nav-bar
      title="个人信息"
      class="title"   
    >
    <template #left>
      <van-icon name="arrow-left" @click="go"/>
    </template>
    </van-nav-bar>
    <!-- 头像 -->
    <div class="item">
      <div>头像</div>
      <div class="info-wrapper">
        <img :src="list.photo" class="avatar">
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 昵称 -->
    <div class="item">
      <div>昵称</div>
      <div class="info-wrapper">
        <div>{{ list.name }}</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 简介 -->
    <div class="item bottom">
      <div>简介</div>
      <div class="info-wrapper">
        <div>未填写</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="item top">
      <div>性别</div>
      <div class="info-wrapper">
        <div>{{ list.gender === 1 ? '女' : '男'}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="item">
      <div>生日</div>
      <div class="info-wrapper">
        <div>{{ list.birthday}}</div>
        <van-icon name="arrow" />
      </div>
    </div>
  </div>

</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  computed: {
    // 模块名，字段数组
    ...mapState('my', ['userInfo']),
    list() {
      return this.userInfo;
    },
  },

  methods: {
    ...mapActions('my', ['updateUserInfoList']),
    go() {
      this.$router.push('/my');
    }
  },

  created() {
    this.updateUserInfoList();
  },
}
</script>

<style lang="less" scoped>
.container {
  background-color: #f8f8f8;
  .title {
    border-bottom: 1px solid #eee;
  }
  .item {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    align-items: center;
    border-bottom: 1px solid #eee;
    .info-wrapper {
      display: flex;
      align-items: center;
      color: #999;
      .avatar {
        display: block;
        object-fit: cover;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 8px;   
      }  
    }  
  }
  .item.top {
    margin-top: 20px;
  }
}

</style>